<template>
  <div class="seller-container">
    <div class="container">
      <div class="tableLab">
        <el-button
          type="primary"
          @click="add('add')"
        >新建</el-button>
        <el-button
          type="primary"
          @click="exportData"
        >导出</el-button>
        <el-button
          type="success"
          @click="ableHandle()"
        >批量启用</el-button>
        <el-button
          type="danger"
          @click="disableHandle()"
        >批量禁用</el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="account"
          label="账号"
          align="center"
        />
        <el-table-column
          prop="password"
          label="初始密码"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            {{ String(scope.row.status) === '0' ? '禁用中' : '启用中' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <el-button
          style="color: #67c236 !important;"
            slot-scope="scope"
            type="text"
            size="middle"
            @click="add(scope.row.id)"
          >修改</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
export default {
  name: 'Seller',
  mixins: [ResizeMixin],
  data () {
    return {
      page: 1,
      pageSize: 10,
      counts: 0,
      tableData: [],
      checkList: []
    }
  },
  mounted () {
    this.getSellers()
  },
  methods: {
    exportData () {
      window.location.href = 'http://localhost:8081/user/export'
    },
    add (st) {
      if (st === 'add') {
        this.$router.push({ path: '/addSeller' })
      } else {
        this.$router.push({ path: '/addSeller', query: { id: st } })
      }
    },
    ableHandle () {
      if (this.checkList.length === 0) {
        return this.$message.error('请选择启用对象')
      }
      this.$store.dispatch('seller/able', { ids: this.checkList.join(',') }).then((response) => {
        if (response.code === 200) {
          this.$message.success('启用成功!')
          this.handleQuery()
        } else {
          this.$message.error('启用失败！')
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
    disableHandle () {
      if (this.checkList.length === 0) {
        return this.$message.error('请选择禁用对象')
      }
      this.$store.dispatch('seller/disable', { ids: this.checkList.join(',') }).then((response) => {
        if (response.code === 200) {
          this.$message.success('禁用成功!')
          this.handleQuery()
        } else {
          this.$message.error('禁用失败！')
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
    getSellers () {
      this.$store.dispatch('seller/getAllSellers', { page: this.page, pageSize: this.pageSize }).then((response) => {
        this.tableData = this.$store.getters.sellers
        this.counts = response.data.total
      }).catch(error => {
        this.$message.error(error)
      })
    },
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
      console.log(this.checkList);
    },
    handleQuery () {
      this.page = 1;
      this.getSellers();
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getSellers()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getSellers()
    }
  }
}
</script>

<style scoped>
.seller-container {
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  border-radius: 5px;
}
.container {
  padding: 1.25rem;
  width: 100%;
}
@media screen and (max-width: 47.0624rem) {
  .seller-container {
    margin: 0;
  }
}
</style>